/*
 * heiniusong@tencent.com
 * pcpush新手引导
 * 2013-11-19
*/
/*@import "./base.less";
@import "./config.less";
@import "../../util/effect.less";*/
/*
.pc-popup{
	width: 740px;height: 450px;z-index: 9999; left: 50%; margin: -190px 0px 0px -370px; position: fixed; top: 50%;
	.pcpush-box{height: 100%;overflow: hidden;}
	.pcpush-con{width: 100%;height: 100%;}
	ul li,
	.arrow a,
	li a{background-position: center top;background-repeat: no-repeat;-webkit-transition: background-image 0.2s ease-in-out;}

	ul{
		width: 3000px;height: 100%;position: relative;left:0;
		li{width:740px;height:100%;float: left}
		li.step1{background-image: url("@{img-pre-path}/pcpush/20131206/step1.png@{timestamp}");}
		li.step2{background-image: url("@{img-pre-path}/pcpush/20131206/step2.png@{timestamp}");background-position-y:70px;}
		li.step3{background-image: url("@{img-pre-path}/pcpush/20131206/step3.png@{timestamp}");}
		li.step4{
			background-image: url("@{img-pre-path}/pcpush/20131206/step4.png@{timestamp}");position: relative;
			a{background-image: url("@{img-pre-path}/pcpush/btn-ex.png@{timestamp}"); display: block;width:191px;height: 42px;cursor: pointer;text-indent: -500px;overflow: hidden;position: relative;top:400px;left:275px;}
			a:hover{background-position-y: -42px;}
			a:visited, a:link, a:active{background-position-y: -84px;}	
		}
	}
	.arrow{
		.left,
		.right{position: absolute;display: block;width:57px;height: 31px;top:190px;text-indent: -500px;overflow: hidden;cursor: pointer;}
		.left{background-image: url("@{img-pre-path}/pcpush/arrow-left.gif@{timestamp}");left:-57px;display: none;}
		.right{background-image: url("@{img-pre-path}/pcpush/arrow-right.gif@{timestamp}");right: -57px;}
	}
	
}
.pcpush-mask{
	width: 100%;height: 100%;background-color:rgba(255,255,255,0.95);-webkit-transition:background-color 0.25s;position: absolute;top:0;height: 0;z-index: 999;
	.close{position:absolute;right: 15px;top:15px;padding: 2px;font-size: 14px;}
	.close:hover{cursor: pointer;}
}
*/
/* 新手引导改版 */
.pcPushGuideCss3 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  left: 0;
  top: 0;
  /*动画一的时间是5s*/

  /*手机QQ的动画时间是17s*/

}
.pcPushGuideCss3 .intro_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  /*z-index: 999;*/

}
.pcPushGuideCss3 .intro_bg_hide {
  -webkit-animation: intro_bg 2s forwards;
}
@-webkit-keyframes intro_bg {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.pcPushGuideCss3 .music_mask {
  position: absolute;
  left: 50%;
  top: 230px;
  z-index: -1;
  margin-left: -242px;
  background: url("../img/pcpush/music_mask.png") no-repeat;
  width: 233px;
  height: 100px;
}
.pcPushGuideCss3 .first {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 9;
  margin-left: -245px;
  background: url("../img/pcpush/first.png") no-repeat;
  width: 490px;
  height: 320px;
}
.pcPushGuideCss3 .i_konw {
  position: absolute;
  bottom: 0;
  left: 165px;
  display: block;
  width: 160px;
  height: 42px;
}
.pcPushGuideCss3 .screen {
  position: absolute;
  left: 50%;
  top: 75px;
  width: 550px;
  height: 400px;
  margin-left: -275px;
}
.pcPushGuideCss3 .close {
  position: absolute;
  right: -205px;
  top: -67px;
  font-size: 18px;
  color: #FFF;
  cursor: pointer;
}
.pcPushGuideCss3 .step1 {
  -webkit-transition: 1s linear all;
}
.pcPushGuideCss3 .step1 .w1 {
  position: absolute;
  left: 360px;
  top: 70px;
  width: 246px;
  height: 36px;
  background: url("../img/pcpush/w1.png") no-repeat;
  opacity: 0;
  left: 300px;
  -webkit-animation: w1 15s;
}
@-webkit-keyframes w1 {
  10% {
    opacity: 0;
    left: 360px;
  }
  15% {
    opacity: 1;
    left: 270px;
  }
  100% {
    left: 270px;
    opacity: 1;
  }
}
.pcPushGuideCss3 .step1 .w2 {
  position: absolute;
  left: 160px;
  top: 70px;
  width: 203px;
  height: 47px;
  opacity: 0;
  background: url("../img/pcpush/w2.png") no-repeat;
  -webkit-animation: w2 15s;
}
@-webkit-keyframes w2 {
  10% {
    opacity: 1;
    left: 50px;
  }
  15% {
    -webkit-transform: rotate(0deg);
  }
  16% {
    -webkit-transform: rotate(3deg);
  }
  18% {
    -webkit-transform: rotate(-3deg);
  }
  19% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    left: 50px;
    opacity: 1;
  }
}
.pcPushGuideCss3 .step1 .w3 {
  position: absolute;
  left: 33px;
  top: 152px;
  width: 233px;
  height: 100px;
  opacity: 0;
  background: url("../img/pcpush/w3.png") no-repeat;
  -webkit-animation: w3 5s 4s forwards;
}
@-webkit-keyframes w3 {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.pcPushGuideCss3 .step1 .w31 {
  position: absolute;
  left: 99px;
  top: 61px;
  width: 83px;
  height: 22px;
  cursor: pointer;
  outline: 1px #50c052 solid;
  /*border: 5px transparent solid;*/

  border-radius: 2px;
  box-shadow: 0 0 0px #0F0;
  -webkit-animation: w31 1s 6s;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes w31 {
  50% {
    outline-width: 3px;
    /*box-shadow: 0 0 20px #0F0;*/
  
    /*border-color: #50c052;*/
  
  }
}
.pcPushGuideCss3 .step1 .w14 {
  position: absolute;
  left: 180px;
  top: 100px;
  width: 110px;
  height: 101px;
  opacity: 0;
  background: url("../img/pcpush/w14.png") no-repeat;
  -webkit-animation: w14 1s 5s forwards;
}
@-webkit-keyframes w14 {
  100% {
    opacity: 1;
    top: 80px;
  }
}
.pcPushGuideCss3 .step2 .w5 {
  position: absolute;
  left: 60%;
  top: 90px;
  width: 202px;
  height: 281px;
  margin-left: -100px;
  opacity: 0;
  background: url("../img/pcpush/w5.png") no-repeat;
  -webkit-animation: w5 17s 0s;
}
@-webkit-keyframes w5 {
  10% {
    opacity: 1;
    left: 50%;
  }
  90% {
    opacity: 1;
    top: 90px;
  }
  100% {
    opacity: 0;
    top: 120px;
    left: 50%;
  }
}
.pcPushGuideCss3 .step2 .w51 {
  position: absolute;
  left: -45px;
  top: -64px;
  width: 286px;
  height: 31px;
  opacity: 0;
  background: url("../img/pcpush/w51.png") no-repeat;
  -webkit-animation: w51 14s 1s;
}
@-webkit-keyframes w51 {
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.pcPushGuideCss3 .step2 .w5_inner {
  position: absolute;
  left: 25px;
  top: 22px;
  width: 130px;
  height: 217px;
  overflow: hidden;
}
.pcPushGuideCss3 .step2 .w52 {
  position: absolute;
  left: 130px;
  top: 0;
  width: 130px;
  height: 217px;
  background: url("../img/pcpush/w52.png") no-repeat;
  -webkit-animation: w52 5s 3s;
}
@-webkit-keyframes w52 {
  20% {
    left: 0;
  }
  70% {
    background: url("../img/pcpush/w52.png") no-repeat;
  }
  80% {
    left: 0;
    background: url("../img/pcpush/w53.png") no-repeat;
  }
  100% {
    left: -130px;
  }
}
.pcPushGuideCss3 .step2 .w53 {
  position: absolute;
  left: 130px;
  top: 0;
  width: 130px;
  height: 217px;
  background: url("../img/pcpush/w54.png") no-repeat;
  -webkit-animation: w53 5s 7s;
}
@-webkit-keyframes w53 {
  20% {
    left: 0;
  }
  70% {
    background: url("../img/pcpush/w54.png") no-repeat;
  }
  80% {
    left: 0;
    background: url("../img/pcpush/w55.png") no-repeat;
  }
  100% {
    left: -130px;
  }
}
.pcPushGuideCss3 .step2 .w54 {
  position: absolute;
  left: 130px;
  top: 0;
  width: 130px;
  height: 217px;
  background: url("../img/pcpush/w56.png") no-repeat;
  -webkit-animation: w54 5s 11s forwards ;
}
@-webkit-keyframes w54 {
  20% {
    left: 0;
  }
  80% {
    left: 0;
    background: url("../img/pcpush/w56.png") no-repeat;
  }
  100% {
    left: 0;
  }
}
.pcPushGuideCss3 .step2 .w54_bar {
  position: absolute;
  left: 6px;
  top: 86px;
  background: url("../img/pcpush/bar.png") repeat-x;
  width: 2px;
  height: 13px;
  -webkit-animation: w54_bar 2s 12s forwards;
}
@-webkit-keyframes w54_bar {
  100% {
    width: 121px;
  }
}
.pcPushGuideCss3 .step2 .w54_num {
  position: absolute;
  left: 45px;
  top: -2px;
  color: #FFF;
  opacity: 0;
  font-size: 13px;
  -webkit-animation: w54_num .5s 14s forwards;
}
@-webkit-keyframes w54_num {
  100% {
    opacity: 1;
  }
}
.pcPushGuideCss3 .step3 .w6 {
  position: absolute;
  left: 50%;
  top: 170px;
  width: 235px;
  height: 131px;
  margin-left: -127px;
  opacity: 0;
  background: url("../img/pcpush/w6.png") no-repeat;
  -webkit-animation: w6 2s 0s forwards;
}
@-webkit-keyframes w6 {
  100% {
    opacity: 1;
    top: 108px;
  }
}
.pcPushGuideCss3 .w7 {
  display: none;
}
.pcPushGuideCss3 .step3 .w7 {
  display: block;
  position: absolute;
  left: 50%;
  top: 330px;
  width: 160px;
  height: 42px;
  margin-left: -80px;
  text-align: center;
  line-height: 42px;
  color: #FFF;
  font-size: 18px;
  opacity: 0;
  cursor: pointer;
  background-color: #55c157;
  -webkit-animation: w7 2s 1s forwards;
}
@-webkit-keyframes w7 {
  100% {
    opacity: 1;
    top: 290px;
  }
}
@media screen and (min-width: 1240px) {
  .pcPushGuideCss3 body {
    background: url("../img/pcpush/body1240.png") no-repeat center top;
    width: 1300px;
    height: 960px;
  }
  .pcPushGuideCss3 .close {
    right: -317px;
  }
  .pcPushGuideCss3 .music_mask {
    margin-left: -363px;
  }
  .pcPushGuideCss3 .step1 .w3 {
    left: -90px;
  }
}
